<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Ejercicio 5</title>
	<meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
	<style type="text/css">
	form {
		display: block;
		margin: 0 auto;
		margin-top: 5%;
		max-width: 450px;
	}

	label {
		display: block;
		margin: 15px;
	}

	input {
		margin-left: 10px;
	}

	.cuadro {
		float: right;
		margin-left: 5px;
		width: 300px;
	}

	#radios {
		width: 310px;
		float: right;
		margin-left: 0px;
	}

	.r {
		display: inline;
		margin: 0px;
		margin-right: 20px;
	}

	#boton {
		display: block;
		margin: 0 auto;
		margin-top: 20px;
		max-width: 230px;
	}

	#genero {
		display: block;
		margin: 15px;
	}
	</style>
	<script type="text/javascript">
	var nombre, apellido, telefono, genero;

	function volver() {
		location.replace("index.php");
	}

	function enviar() {

		nombre = document.formulario.nombre.value;
		apellido = document.formulario.apellido.value;
		telefono = document.formulario.telefono.value;
		genero = document.formulario.sexo.value;

		if (nombre == "" || nombre.length > 30) {
			alert("El nombre no es correcto");
		} else if  (apellido == "" || apellido.length > 50) {
			alert("El apellido no es correcto");
		} else if (telefono == "" || telefono.length > 11 || isNaN(telefono)) {
			alert("El teléfono no es correcto");
		} else {
			agregar();
		}

	}

	function agregar() {
		var xmlhttp = new XMLHttpRequest();

		xmlhttp.open("POST", "control.php", true);
		xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		xmlhttp.send("js=c&nombre="+nombre+"&apellido="+apellido+"&telefono="+telefono+"&genero="+genero);

		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState==4 && xmlhttp.status==200) {
				var respuesta = xmlhttp.responseText;
				if (respuesta == "true") {
					alert("Empleado creado correctamente");
					limpiar();
				} else if (respuesta == "false") {
					alert("El empleado ya existe");
				} else if (respuesta == "Error de conexión") {
					alert(respuesta);
				} else {
					alert("Error grave");
					document.writeln(respuesta);
				}
			}
		}

	}

	function limpiar() {
		document.formulario.nombre.value = "";
		document.formulario.apellido.value = "";
		document.formulario.telefono.value = "";
		document.formulario.sexo.value = "";
	}

	</script>
</head>
<body>

	<form name="formulario">
		<fieldset>
			<legend>Ingreso de Empleados</legend>
			<label>Nombre<input type="text" name="nombre" class="cuadro"></label>
			<label>Apellido<input type="text" name="apellido" class="cuadro"></label>
			<label>Teléfono<input type="text" name="telefono" class="cuadro"></label>
			<div id="genero">
				Sexo
				<div id="radios">
					<label class="r">
						<input type="radio" name="sexo" value="Hombre" checked='checked'>
						Hombre
					</label>
					<label class="r">
						<input type="radio" name="sexo" value="Mujer">
						Mujer
					</label>
				</div>
			</div>

			<div id="boton">
				<input type="button" value="Enviar" onclick="enviar()">
				<input type="button" value="Cancelar y volver" onclick="volver()">
			</div>
		</fieldset>
	</form>

</body>
</html>